<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>诚赉健康</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/into.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="loading" v-if="mask">
            <img src="../img/load.gif">
        </div>
        <div class="conBox">
            <div class="backBox" @click="onClickLeft">
                <van-icon name="arrow-left" />
            </div>
            <img src="./img/jilu1.png" alt="" class="jiluImg jiluImg1" @click="getNewUserInfo(2)">
            <img src="./img/rulesImg1.png" alt="" class="jiluImg jiluImg2">
            <img src="./img/kehuBtn.png" alt="" class="kehuBtn" @click="toUserList" v-if="userInfo.userStatus==1">
            <div class="chouBtn" @click="getNewUserInfo(1)"></div>
            <!-- 抽奖记录 -->
            <div class="infoCon infoCon1" v-if="showList">
                <img src="./img/jiluTitle.png" alt="">
                <div class="jiluBox">
                    <div class="jiluInner">
                        <img src="./img/jiluTip.png" alt="">
                        <span>我的抽奖记录</span>
                        <div class="tableBox">
                            <template v-if="userInfo.awardTime">
                                <div>
                                    <span>奖项</span>
                                    <span>奖品</span>
                                    <span>日期</span>
                                    <span>状态</span>
                                </div>
                                <div>
                                    <span>{{userInfo.awardName||''}}</span>
                                    <span>{{userInfo.awardContent||''}}</span>
                                    <span>{{userInfo.awardTime||''}}</span>
                                    <span>{{userInfo.drawawardType==1?'已领取':'未领取'}}</span>
                                </div>
                            </template>
                            <div class="emptyBox" v-else>
                                <img src="./img/no-data1.png" alt="">
                            </div>
                        </div>
                        <img src="./img/jilu2.png" alt="">
                    </div>
                    <img src="./img/closeBtn.png" alt="" class="closeBtn" @click="showList=false">
                </div>
            </div>

            <!-- 奖品展示区域 -->
            <div class="giftBox">
                <div class="giftInner">
                    <div class="giftTop">
                        <div>
                            <img src="./img/leftIcon.png" alt="">
                            <img src="./img/title1.png" alt="">
                            <img src="./img/rightIcon.png" alt="">
                        </div>
                        <div>
                            <div>
                                {{prizeList[0].awardContent||'神秘大奖'}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="infoCon infoCon3" v-if="showJiang">
                <img src="./img/active.gif" class="activeGif" alt="" v-if="jiangGif">
                <div v-else class="overBox">
                    <div class="awardName"> <span>获得</span> {{prizeObj.awardName||""}}</div>
                    <div class="awardContent">{{prizeObj.awardContent||""}}</div>
                    <div @click="showJiang=false" class="knowBtn"></div>
                </div>
            </div>

        </div>

    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/city.data-3.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                showList: false,// 显示抽奖记录
                userInfo: '',//用户基本信息
                prizeList: [],// 奖品列表
                prizeObj: '',//中奖项
                signinUserId: localStorage.signinUserId,
                isNoStart: true,
                isEnd: false,
                showJiang: false,
                jiangGif: true,
                prizeIndex: -1,// 当前中奖的索引
                list: [],
                i: 0
            },
            created() {
                this.getActiveInfo()
                this.getSigninAward()
            },
            methods: {
                onClickLeft() {
                    window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe50be6288d63a04c&redirect_uri=https://www.ccclkj.cn/sharepage/51Active/index.html&response_type=code&scope=snsapi_base&state=2#wechat_redirect")
                },

                // 显示抽奖记录
                showListHandle() {
                    var that = this;
                    this.prizeList.forEach(item => {
                        if (item.awardName == that.userInfo.awardName) {
                            that.userInfo.awardContent = item.awardContent
                        }
                    })
                    this.showList = true
                },

                // 抽奖
                chouHandle() {

                    if (this.isNoStart) {
                        this.$toast('抽奖活动未开始')
                        return
                    }
                    if (this.isEnd) {
                        this.$toast('抽奖活动已结束')
                        return
                    }
                    if (this.userInfo.chanceType != 1 || (this.userInfo.chanceType == 1 && this.userInfo.awardType == 1)) {
                        this.$toast('抱歉，您暂无抽奖资格')
                        return
                    }

                    var that = this;
                    this.list = this.prizeList
                    const availablePrizes = this.prizeList.filter(prize => prize.overplus > 0);
                    if (availablePrizes.length === 0) {
                        this.$toast('很遗憾，奖池已空，抽奖结束。');
                        return;
                    }
                    this.showJiang = true;
                    this.jiangGif = true;

                    setTimeout(() => {
                        that.jiangGif = false;
                    }, 2200);

                    // alert(JSON.stringify(availablePrizes))

                    const totalProbability = availablePrizes.reduce((acc, cur) => acc + cur.probability, 0);
                    const randomNumber = Math.random() * totalProbability;
                    console.log(randomNumber);

                    let cumulativeProbability = 0, obj = '';
                    for (const prize of availablePrizes) {
                        console.log(prize);
                        cumulativeProbability += prize.probability;
                        console.log(cumulativeProbability);
                        if (randomNumber < cumulativeProbability) {
                            prize.overplus--;
                            that.prizeObj = prize
                            that.prizeIndex = that.list.findIndex(item => item.awardId == prize.awardId)
                            // that.$toast('抽中' + prize.awardName + '，奖品是：' + prize.awardContent + '')
                            break;
                        }
                    }

                    // alert(that.prizeIndex)
                    // return
                    that.editUserAward()
                    // this.$dialog.alert({
                    //     title: '恭喜您，抽中' + that.prizeObj.awardName + '',
                    //     message: '奖品是：' + that.prizeObj.awardContent + '',
                    //     confirmButtonText: '立即收下',
                    // })
                    //     .then(function () {
                    //         that.editUserAward()
                    //     })
                    //     .catch(function () {
                    //         // on cancel
                    //     });
                },

                // 修改用户中奖信息
                editUserAward() {
                    var that = this;
                    that.mask = true;
                    ajax({
                        url: newUrl4 + "meeting/editSignin",
                        type: 'post',
                        data: {
                            signinId: that.userInfo.signinId,
                            awardType: 1,
                            awardName: that.prizeObj.awardName,
                            awardId: that.prizeIndex,   // 由中奖id换成奖品索引
                            awardTime: that.getTime(),
                            flag: 1,
                            drawawardType: 0,//领奖状态
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            // alert(res)
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.userInfo.awardType = 1
                                that.userInfo.awardId = that.prizeObj.awardId
                                that.userInfo.awardName = that.prizeObj.awardName
                                that.userInfo.awardTime = that.getTime()
                                console.log(res.data);
                                that.$toast('记录成功')
                            }
                            that.mask = false
                        },
                    })
                },

                // 查看客户列表
                toUserList() {
                    window.location.replace("./userList.html")
                },

                getNewUserInfo(flag) {
                    var _this = this;
                    _this.mask = true;
                    ajax({
                        url: newUrl4 + "meeting/getSigninId",
                        type: 'post',
                        data: {
                            id: _this.signinUserId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            // console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res);
                                _this.userInfo = res.data
                                if (flag == 1) {
                                    _this.getSigninAward(flag)
                                } else if (flag == 2) {
                                    _this.showListHandle()
                                }
                            } else {
                                _this.$toast('登录失败，请退出重新登录')
                            }
                            _this.mask = false
                        },
                    })
                },

                // 获取奖品列表
                getSigninAward(flag) {
                    this.i++
                    var _this = this;
                    _this.mask = true;
                    ajax({
                        url: newUrl4 + "meeting/getRedisAward",
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log('最新' + _this.i);

                            console.log(res);

                            var res = JSON.parse(res)



                            if (res.flag) {
                                console.log(res.data);
                                res.data.forEach(item => {
                                    item.probability = (item.chance.slice(0, -1)) / 100
                                })
                                console.log(res.data);
                                _this.prizeList = res.data

                                // al
                                console.log(flag);

                                if (flag == 1) {
                                    _this.chouHandle()
                                }
                            }
                            _this.mask = false
                        },
                    })
                },
                validator: function (val) {
                    return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
                },

                checkText(str) {
                    var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g")
                    if (!reg.test(str)) {
                        return false;
                    } else {
                        return true;
                    }
                },
                // 获取当前时间
                getTime() {
                    var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
                    var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
                    console.log(beijingTime);
                    return beijingTime
                },
                // 获取活动信息
                getActiveInfo() {
                    var _this = this;
                    _this.mask = true;
                    ajax({
                        url: newUrl4 + "meeting/listMeeting",
                        type: 'post',
                        data: {
                            id: - 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            // console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res.data[0]);
                                var info = res.data[0]
                                _this.isNoStart = new Date(info.startTime).getTime() > new Date().getTime()
                                _this.isEnd = new Date(info.awardEndTime).getTime() < new Date().getTime()

                                console.log(_this.isNoStart);
                                console.log(_this.isEnd);

                            }
                            _this.mask = false
                        },
                    })
                },

            }
        })

    </script>

</body>

</html>